<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
	<title>表格数据展现插件演示</title>
	<link rel="stylesheet" href="packaged/css/semantic.css" type="text/css" />
	<link rel="stylesheet" href="css/default.css" type="text/css" />
	<link rel="stylesheet" href="css/style.css" type="text/css" />
	<style type="text/css"></style>
	<script src="js/jquery.min.js"></script>
	<script src="packaged/javascript/semantic.js"></script>
	<script src="javascript/hyui.src.js"></script>
	<script src="datagrid.js"></script>
	<script type="text/javascript">
	$(document).ready(function(){

		hy.datagrid("#exp1",{
			thead_columns:["编号","姓名","日期"],
			field_columns:["num","name","date"],
			data:[{num:1,name:"Tom",date:"2013/11/23"},{num:2,name:"sylthas",date:"2014/02/16"}],
			sort:true
		});

		hy.datagrid("#exp2",{
			thead_columns:[[{text:"编号",field:"num",rowspan:2, identity:true},{text:"个人信息",colspan:2}],[{text:"姓名",field:"name"},{text:"日期",field:"date"}]],
			field_columns:[{field:"num",checkbox:true,onChange: function(data){console.info(data);}},"name","date"],
			data:[{num:1,name:"Tom",date:"2013/11/23"},{num:2,name:"sylthas",date:"2014/02/16"}],
			sort:true
		});
		
		hy.datagrid("#exp3", {
			url: "ajax/load.php",
			thead_columns:["公司代码","公司名称","法人代表","区域代码"],
			field_columns:["code","company","name","areacode"],
			loader: "正在加载",
			sort: true,
			pagination: ".ui.small.menu"
		});

		hy.datagrid("#exp4", {
			url: "ajax/load.php",
			thead_columns:[[{text:"Company Info",colspan:2},{text:"Person Info",colspan:2},{text:"操作",rowspan:2}],[{text:"公司代码",field:"code"},{text:"公司名称",field:"company"},{text:"法人代表",field:"name"},{text:"区域代码",field:"areacode"}]],
			field_columns:[{field:"code", checkbox: true,onChange: function(data){console.info(data);},identity:true},"company","name","areacode"],
			loader: "正在加载",
			sort: true,
			pagination: "#exp4-p",
			operation:"<a class=\"ui mini green label\">操作</a>"
		})
	});
	</script>
</head>
<body>
	<div class="main-wrapper">
		<h3>HY-UI Demos</h3>

		<div class="theme">表格数据展现插件演示用例。</div> <strong>1.</strong>
		简单示例
		<p>指定表头列、指定字段列、指定数据源</p>
		<pre><code class="javascript">hy.datagrid(".ui.table",{
    thead_columns:["编号","姓名","日期"],
    field_columns:["num","name","date"],
    data:[{num:1,name:"Tom",date:"2013/11/23"},{num:2,name:"sylthas",date:"2014/02/16"}]
});</code></pre>
		<table id="exp1" class="ui inverted orange celled sortable table segment">
			<thead></thead>
		</table> <strong>2.</strong>
		多级表头演示 <em>hy.datagrid(table,options);</em>
		<p>
			未指定 <em>field_columns</em>
			属性时将自动从
			<em>thead_columns</em>
			中获取,
			<em>thead_columns</em>
			中
			<em>field</em>
			属性作为映射
		</p>
		<pre><code class="javascript">hy.datagrid(".ui.table", {
	thead_columns: [[{ // 指定表头列
		text: "编号", // 显示文本
		field: "num", // 对应的字段
		rowspan: 2, // 合并单元格占两行
		identity: true // 标识字段属性 用于checkbox/radio模式下匹配缓存数据,该字段值必须具有唯一性
	},
	{
		text: "个人信息",
		colspan: 2 // 合并单元格占两列
	}], [{
		text: "姓名",
		field: "name"
	},
	{
		text: "日期",
		field: "date"
	}]],
	field_columns: [{ // 指定字段列 [field,checkbox,onChange] 属性均可在表头指定,因此本列子 fields_columns完全可以不指定
		field: "num",
		checkbox: true, // 表示该字段显示为 checkbox复选框 "radio":true 表示单选框
		onChange: function(data) { // checkbox/radio 模式下选框状态更改时触发回调函数 传入data为当前选中的数据字典
			console.info(data);
		}
	},
	"name", "date"],
	data: [{ // 显示指定数据 对应field属性从中取值
		num: 1,
		name: "Tom",
		date: "2013/11/23"
	},
	{
		num: 2,
		name: "sylthas",
		date: "2014/02/16"
	}]
});
</code></pre>
		<table id="exp2" class="ui inverted purple celled sortable table segment">
			<thead></thead>
		</table>

		<strong>3.</strong>
		异步请求数据
		<p>页面布局样式 要在表格前插入遮罩层时请将table包含在div容器中 设置div样式<em>position:relative;</em></p>
		<pre><code class="javascript">&lt;div style="position:relative;"&gt;
    &lt;table class="ui inverted red celled sortable table segment"&gt;
        &lt;thead&gt;
        &lt;/thead&gt;
    &lt;/table&gt;
    &lt;div class="ui small menu"&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>
		<p>配置说明</p>
		<pre><code class="javascript">hy.datagrid(".ui.table", {
	url: "ajax/load.php", // 请求地址
	thead_columns: ["公司代码", "公司名称", "法人代表", "区域代码"], // 表头
	field_columns: ["code", "company", "name", "areacode"], // 字段
	loader: "正在加载", // 加载时显示内容 未指定位置时将在表格前插入遮罩层
	sort:true, // 是否排序
	pagination: ".ui.small.menu" // 分页条容器
})
</code></pre>
		<div style="position:relative;">
			<table id="exp3" class="ui inverted red celled sortable table segment">
				<thead></thead>
			</table>
			<div class="ui small menu"></div>
		</div>
		<p>&nbsp;</p>
		<strong>4.</strong> 更多配置
		<p>综合示例 多级表头、选择、分页、排序</p>
		<pre><code class="javascript">hy.datagrid(".ui.table", {
	url: "ajax/load.php",
	thead_columns: [[{ // 多级表头不建议通过插件生成，建议手动控制
		text: "Company Info",
		colspan: 2
	},
	{
		text: "Person Info",
		colspan: 2
	},
	{
		text: "操作",
		rowspan: 2
	}], [{
		text: "公司代码",
		field: "code"
	},
	{
		text: "公司名称",
		field: "company"
	},
	{
		text: "法人代表",
		field: "name"
	},
	{
		text: "区域代码",
		field: "areacode"
	}]],
	field_columns: [{
		field: "code",
		checkbox: true,
		onChange: function(data) {
			console.info(data);
		},
		identity: true
	},
	"company", "name", "areacode"],
	loader: {
		text: "正在加载",
		converage: "div.table.container" // 覆盖范围
	}
	sort: { // 排序可以使用简单的 sort:true 来实现，使用多级表头时要在表头指定field属性和index属性，亦可以指定type属性
		code: {
			type: "string",
			index: 0
		},
		more...
	},
	pagination: {
		container: "div.ui.small.menu", // 分页条容器，其他更多配置请参照 分页插件 。onChange回调函数在这配置将不生效。
        more...
	}
	operation: "&lt;a class=\"ui mini green label\"&gt;操作&lt;/a&gt;" // 操作列类容
})
</code></pre>
		<div style="position:relative;">
			<table id="exp4" class="ui inverted green celled sortable table segment">
				<thead></thead>
			</table>
			<div id="exp4-p" class="ui small menu"></div>
		</div>
		<p>&nbsp;</p>
		<strong>5.</strong> 默认配置
		<pre><code class="javascript">datagrid.defaults = {
	thead_columns: null, // 表头
	field_columns: null, // 字段
	data: null, // 本地数据
	form: null, // 表单
	params: null, // 参数
	url: null, // ajax请求地址
	method: "post", // ajax 请求方式
	pagination: null, // 分页条
	sort: null, // 排序
	loader: null, // ajax 请求加载
	operation: null, // 操作列内容
	onComplete: function(xhr, ts, state) {}, // ajax 请求完成后执行 [state = "init" || "reset"] init初始化加载 reset分页变动后重载
	beforeLoad: function(params) {}, // ajax 加载前执行函数 params 为请求前参数
	afterLoad: function(table) {} // 加载完后执行函数，传入table对象 
};
</code></pre>
		<p>&nbsp;</p>
		<div class="theme">&copy;2014 宏宇软件 by sylthasgg@gmail.com</div>
	</div>
	
	<script type="text/javascript" src="js/highlight.js"></script>
	<script type="text/javascript">hljs.initHighlightingOnLoad();</script>
</body>
</html>